import color from 'css-color-function'
import getStyleTemplate from './getStyleTemplate'

const formula = {
  'shade-1': 'color(primary shade(10%))',
  'light-1': 'color(primary tint(10%))',
  'light-2': 'color(primary tint(20%))',
  'light-3': 'color(primary tint(30%))',
  'light-4': 'color(primary tint(40%))',
  'light-5': 'color(primary tint(50%))',
  'light-6': 'color(primary tint(60%))',
  'light-7': 'color(primary tint(70%))',
  'light-8': 'color(primary tint(80%))',
  'light-9': 'color(primary tint(90%))',
}

const generateColors = (primary) => {
  let colors = {}
  Object.keys(formula).forEach((key) => {
    const value = formula[key].replace(/primary/g, primary)
    colors[key] = color.convert(value)
  })
  return colors
}

export default (color) => {
  const stylesheetCount = document.styleSheets.length || -1
  let originalStyle = getStyleTemplate()
  let colors = {
    primary: color,
  }
  Object.assign(colors, generateColors(color))
  Object.keys(colors).forEach((key) => {
    originalStyle = originalStyle.replace(
      new RegExp('(:|\\s+)' + key, 'g'),
      '$1' + colors[key]
    )
  })
  if (stylesheetCount === document.styleSheets.length) {
    const style = document.createElement('style')
    style.innerText = originalStyle
    document.head.appendChild(style)
  } else {
    document.head.lastChild.innerText = originalStyle
  }
}
